iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 7
0
Mobile Development

IOS 基本元件運用和套件運用系列 第 7

(Day7)在App增加Google Sign In 功能

  • 分享至 

  • xImage
  •  

在這篇文章會教你如何在你的App裡增加Google Sign In 的功能。

步驟

1.在 Google Developer Console 創建 OAuth credentials.
2.Import GoogleSignIn SDK 到你的 app.
3.在 app 裡建立 Google Sign In.
4.新增一個登入鍵.
5.符合 Google Sign In 協議

在 Google Developer Console 創建 OAuth credentials.

Google Sign In 是以 OAuth 2.0 來認證使用者和取得權限。
首先要為你的App 產生兩樣東西:
1.OAuth Client ID
2.Unique URL scheme (reversed client Id)

登入 Google Developer Console 然後根據以下步驟:

  • 創建或新增專案
  • 到專案裡的 credentials page
  • 創建一個 OAuth Client Id
    https://ithelp.ithome.com.tw/upload/images/20200903/20129678kPi7qHJz3o.png

如果沒設過consent screen他會先叫你設一個。這設過一次就好了
https://ithelp.ithome.com.tw/upload/images/20200903/20129678XKP4XhJc2w.png

選擇 External 然後 Create
https://ithelp.ithome.com.tw/upload/images/20200903/20129678Cr3hubNONE.png

設App的名字和Logo
https://ithelp.ithome.com.tw/upload/images/20200903/20129678pahvq5dEpv.png

如果沒有要用其他的Google APIs 這裏不用動。
https://ithelp.ithome.com.tw/upload/images/20200903/201296788NJdZOuIW3.png

由於只是練習設完了選save。
https://ithelp.ithome.com.tw/upload/images/20200903/20129678lt8f9WM5UK.png

設完 Consent Screen 後,就可以開始創建 OAuth client ID.
https://ithelp.ithome.com.tw/upload/images/20200903/20129678TIix7jpoU1.png

Bundle ID 在專案 General
https://ithelp.ithome.com.tw/upload/images/20200903/20129678Vm9Pd8mpnf.png

創建後把包含 Client ID 和 URL scheme (reverse client ID) 的 .plist 下載下來.

https://ithelp.ithome.com.tw/upload/images/20200903/20129678Aamc2HDmM2.png

Import GoogleSignIn SDK 到你的 app.

這裏推薦用 Cocoapods 來為 App 安裝套件. 如果要手動安裝,點這裏。

在你的pod file 裡新增一個套件。

use_frameworks!
# Pinning to the latest version at the time
pod 'GoogleSignIn', '~> 4.4.0'

在 app 裡建立 Google Sign In.

裝了套件後,接著以下的步驟做:

  • 在專案裡的app target 裡新增一個 URL type. 在 URL Schemes 裡輸入 剛剛下載 plist 裡面的 REVERSED_CLIENT ID.
    https://ithelp.ithome.com.tw/upload/images/20200903/20129678oZUgEZCIPO.png

  • 在 app delegate 裡設定 client ID:

import GoogleSignIn

class AppDelegate: UIResponder, UIApplicationDelegate {
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        GIDSignIn.sharedInstance()?.clientID = "207537233955-jkect8q1tms2unmdda6bb0k8e4mj59t8.apps.googleusercontent.com"
        return true
    }
}
  • 在 app delegate 新增 application(_:open:options)
func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
    let sourceApplication = options[.sourceApplication] as? String
    let annotation = options[.annotation]
    
    return GIDSignIn.sharedInstance()?.handle(url, sourceApplication: sourceApplication, annotation: annotation) ?? false
}

新增一個登入鍵.

在storyboard 新增一個按鈕。

import GoogleSignIn

class ViewController: UIViewController {
      override func viewDidLoad() {
        super.viewDidLoad()
      }
  
      @IBAction func signIn(_ sender: Any) {
        GIDSignIn.sharedInstance()?.signIn()

    }
}

現在按下按鈕會回傳錯誤,因為還沒設delegate.

extension ViewController: GIDSignInDelegate, GIDSignInUIDelegate {
    // MARK: - GIDSignInDelegate
    
    func sign(_ signIn: GIDSignIn!, didSignInFor user: GIDGoogleUser!, withError error: Error!) {
        // A nil error indicates a successful login
        googleSignInButton.isHidden = error == nil
    }
}

符合 Google Sign In 協議

在 View controller 必須符合兩個協議:GIDSignInDelegate 和 GIDSignInUIDelegate.

extension ViewController: GIDSignInDelegate, GIDSignInUIDelegate {
    // MARK: - GIDSignInDelegate
    
    func sign(_ signIn: GIDSignIn!, didSignInFor user: GIDGoogleUser!, withError error: Error!) {
        // A nil error indicates a successful login
        googleSignInButton.isHidden = error == nil
    }
}

這樣就完成了。


上一篇
(Day6)GCDWebServer介紹
下一篇
(Day8)第三方套件IQKeyboardManager
系列文
IOS 基本元件運用和套件運用30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言